<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="supplierName"
        :placeholder="placeText"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="head-container">
      <el-tree :data="treeData"
               default-expand-all
               :filter-node-method="filterNode"
               ref="tree"
               :props="defaultProps"
               @node-click="handleNodeClick"
               :expand-on-click-node="false"
               :highlight-current="true"
      >

        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span draggable="true" @dragover="dragOver($event, data)">{{ node.label }}</span>
        </span>

      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    dataList: Array,
    placeText: {
      type: String,
      default: '请输入服务方名称'
    },
    labelField: {
      type: String,
      default: 'label'
    }
  },
  data() {
    return {
      supplierName: "",
      // treeData:[],
      // tree的结构
      defaultProps: {
        children: 'children',
        label: this.labelField
      },
      chooseData: {}
    }
  },
  computed:{
    treeData() {
      return this.dataList;
    }
  },
  watch: {
    supplierName(val) {
      this.$refs['tree'].filter(val);
    }
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('chooseTreeData', data);
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    dragOver(ev, data) {
      // const value = ev.target.innerText;
      this.chooseData = data;

      this.$emit('chooseTreeData', data);
    }

  }
}
</script>

<style scoped>

</style>
